<template>
	<view class="flex-col page">
		<MyHeader background="#fff" title="发起拼车"></MyHeader>
		<view class="mt-8 flex-col group">
			<view class="flex-col self-stretch">
				<view class="flex-row section_4 startSelect">
					<text class="font text">始发地</text>
					<!-- 收集标题 -->
					<!-- <input class="titleInput ml-12 font text_2" trim="all" v-model="formInfo.startingLocation"
						placeholder="请输入始发地"></input> -->
					<uni-data-select class="selectStyle" v-model="formInfo.startingLocation"
						:localdata="range" placeholder="请输入始发地"></uni-data-select>
				</view>
				<view class="flex-row section_4 startSelect">
					<text class="font text">目的地</text>
					<!-- 收集标题 -->
					<uni-data-select class="selectStyle" v-model="formInfo.destination"
						:localdata="range" placeholder="请输入目的地"></uni-data-select>
				</view>
				<view class="flex-row section_4" @click="calendarShow = true">
					<text class="font text">预约日期</text>
					<!-- 显示预约时间 -->
					<text style="width: 75%;"
						class="ml-12 font text_2">{{formInfo.date ? formInfo.date: "请选择预约日期"}}</text>
					<view class="flex-row items-center">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="flex-row section_4" @click="timePickerShow = true">
					<text class="font text">预约时间</text>
					<!-- 显示预约时间 -->
					<text style="width: 75%;"
						class="ml-12 font text_2">{{formInfo.time ? formInfo.time: "请选择预约时间"}}</text>
					<view class="flex-row items-center">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="mt-8 flex-col section_5">
					<view class="flex-row justify-between items-center self-stretch">
						<text class="font">内容</text>
						<text class="font_2 text_3">{{formInfo.remarks.length}}/500</text>
					</view>
					<!-- 收集文本域内容 -->
					<textarea maxlength="500" placeholder="请输入您的内容" v-model="formInfo.remarks"
						class="textarea mt-16  font_2">
          </textarea>
				</view>
			</view>
			<view @click="onPublish" class="mt-92 flex-col justify-start items-center self-center text-wrapper">
				<text class="text_7">发布</text>
			</view>
		</view>
	</view>
	<!-- 时间选择器 -->
	<u-datetime-picker ref="timePickerRef" @close="timePickerShow = false" @confirm="timeConfirm" :showToolbar="false"
		:closeOnClickOverlay="true" :show="timePickerShow" v-model="formInfo.time" mode="time">
		<template #toolbar-bottom>
			<u-button type="primary" @click="timePickerRef.confirm()">确定</u-button>
		</template>
	</u-datetime-picker>
	<!-- 日历 -->
 
	<up-calendar @confirm="calendarConfirm" @close="calendarShow = false" :monthNum="24"
		:minDate="minDate" :maxDate="maxDate" :show="calendarShow"></up-calendar>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
	} from 'vue';
	import {
		publishCarAPI
	} from '../../../apis/taxi';
	import {
		useUserStore
	} from '../../../store/useUserStore';
	import {
		getQueryAddress
	} from '@/apis/taxi';
	const formInfo = reactive({
		startingLocation: '西门',
		destination: '北站南广场',
		date: '',
		time: '',
		remarks: ''
	})
	
	// 计算1年前的日期
	const minDate = computed(() => {
		const year = new Date().getFullYear() - 1;
		const month = new Date().getMonth();
		const day = new Date().getDate();
		return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
	});
	// 计算1年后的日期
	const maxDate = computed(() => {
		const year = new Date().getFullYear() + 1;
		const month = new Date().getMonth();
		const day = new Date().getDate();
		return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
	});
	let myAppointmentTime = computed(() => {
		return formInfo.date + ' ' + formInfo.time + ':00'
	})

	let timePickerShow = ref(false)
	const timePickerRef = ref(null)
	// 确定时间
	const timeConfirm = (e) => {
		timePickerShow.value = false
	}
	// 控制日历显示隐藏
	const calendarShow = ref(false)
	// 确定预约日期
	const calendarConfirm = (e) => {
		formInfo.date = e[0]
		calendarShow.value = false
	}
	// 发布事件
	const userStore = useUserStore()
	const onPublish = async () => {
		// 非空判断
		for (const key in formInfo) {
			if (!formInfo[key]) {
				return uni.showToast({
					title: '请完整填写信息',
					icon: 'none'
				})
			}
		}
		await publishCarAPI({
			userId: userStore.userInfo.id,
			appointmentTime: myAppointmentTime.value,
			startingLocation: formInfo.startingLocation,
			destination: formInfo.destination,
			remarks: formInfo.remarks
		})
		uni.navigateBack()
	}


	const range = ref([{
			value: 0,
			text: "篮球"
		},
		{
			value: 1,
			text: "足球"
		},
		{
			value: 2,
			text: "游泳"
		},
	], )
	const sendSearchRequest = async () => {
		const res = await getQueryAddress()

		range.value = res.data.map(item => {
			return {
				...item,
				value: item.address,
				text: item.address
			}
		})


	}
	sendSearchRequest()
</script>

<style scoped lang="scss">
	.sel-img-box {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
	}

	:deep(.uni-file-picker) {
		position: absolute;
		opacity: 0;
		width: 100%;
		padding-top: 33.3%;
		overflow: hidden;

	}


	.textarea {
		width: 100%;
		line-height: 1.5 !important;
		resize: none;
		/* 禁止拖动调整大小 */
	}

	.titleInput {
		position: relative;
		top: -10rpx;
		width: 100%;
	}

	.time-arrow-right {
		position: relative;
		top: -10rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-7 {
		margin-top: 14rpx;
	}

	.page {
		padding-bottom: 360rpx;
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 32rpx 28rpx;
		background-color: #ffffff;
		border-bottom: solid 2rpx #f0f0f0;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.image_4 {
		margin-top: 56rpx;
		width: 18rpx;
		height: 34rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		width: 174rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.pos {
		position: absolute;
		right: 12rpx;
		top: 100rpx;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.group {
		padding: 0 32rpx;
	}

	.section_4 {
		padding: 30rpx 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 26.02rpx;
		color: #333333;
	}

	.text {
		line-height: 25.74rpx;
	}

	.text_2 {
		line-height: 25.84rpx;
	}

	.section_5 {
		padding: 36rpx 32rpx 0rpx 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 26.02rpx;
	}

	.text_3 {
		line-height: 27.24rpx;
	}

	.section_6 {
		padding: 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_4 {
		line-height: 26.66rpx;
	}

	.group_2 {
		position: relative;
		// padding: 16rpx 0 24rpx;
		border-radius: 24rpx;
		width: 140rpx;
		height: 140rpx;
		overflow: hidden;
		margin-right: 10rpx;
		border-left: solid 2rpx #d9d8df;
		border-right: solid 2rpx #d9d8df;
		border-top: solid 2rpx #d9d8df;
		border-bottom: solid 2rpx #d9d8df;
	}

	.text_5 {
		color: #4c8eef;
		font-size: 96rpx;
		font-family: SourceHanSansCN;
		line-height: 69.8rpx;
	}

	.text_6 {
		color: #bcbac7;
		font-size: 20rpx;
		font-family: SourceHanSansCN;
		line-height: 18.54rpx;
	}

	.text-wrapper {
		padding: 24rpx 0;
		background-color: #4c8eef;
		border-radius: 52rpx;
		width: 230rpx;
	}

	.text_7 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.66rpx;
		letter-spacing: 8rpx;
	}

	.startSelect {
		display: flex;
		align-items: center;

		// justify-content: center;
		.selectStyle {
			width: 80%;
			margin-left: 10px;
		}
	}
</style>